<template>
  <div id="centerLeft">
    <div class="left-content01">
      <div class="content01-hander">
        小程序案例类型占比与问题处理情况
      </div>
      <div class="content-item">
        <div class="content-item-top">
          <TouristEcharts></TouristEcharts>
        </div>
        <div class="content-item-bottom">
          <div class="little-bottom" v-for="(item, index ) in left_content02" :key=index>
            <div class="bottom-i" v-if="index == 0">
              <img src='../../../public/imgs/tehdasa.png' alt="">
            </div>
            <div class="bottom-i" v-if="index == 1">
              <img src='../../../public/imgs/fdsfdsfdsfsfsda.png' alt="">
            </div>
            <div class="bottom-i" v-if="index == 2">
              <img src='../../../public/imgs/tehdasa.png' alt="">
            </div>
            <div class="bottom-i" v-if="index == 3">
              <img src='../../../public/imgs/fdfds.png' alt="">
            </div>

            <div>
              <div class="dsakjdhsajdhsakljdhsa">
                {{ item.name }}
              </div>
              <div class="name-text">
                {{ item.value }} <span v-if=" item.name != '回答速度'">%</span>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TouristEcharts from "./TouristEcharts.vue";

export default {
  data() {
    return {
      left_content02: [
      ],

      detail: false,
      allNum: 0,
    };
  },
  components: {
    TouristEcharts,
  },
  created() {
    this.fetchData();
  },
  mounted() { 
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.$axios.get("/api/survey/type");
        this.left_content02 = response.data.config;
      } catch (error) {
        console.error(error);
      }
    },
    flow() {
      this.detail = true;
      this.title = "信件来源";
    },
    close() {
      this.detail = false;
    },
  },
};
</script>

<style lang="scss" scoped>
$box-width: 572px;
$box-height: 480px;

#centerLeft {
  position: relative;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;

  .left-content01 {
    width: 100%;
    height: 100%;
    background-image: url("/public/imgs/Rignhdsa.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .content01-hander {
    background: linear-gradient(to bottom, #ffffff, #97cdff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    height: 58px;
    font-family: Adobe Heiti Std;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    display: flex;
    align-items: center;
    color: #fff;
    padding-left: 60px;
    line-height: 56px;
  }

  .content-itemleft {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 312px;
    height: 20px;
    margin-top: 20px;
  }

  .content-itemleft-box {
    width: 75px;
  }

  .content-itemleft-title {
    width: 50px;
    height: 12px;
    font-family: SourceHanSansSC;
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
  }

  .content-item-top {
    width: 572px;
    height: 210px;
  }

  .content-item-bottom {
    width: 572px;
    height: 165px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;

    .little-bottom {
      width: 240px;
      height: 75px;
      display: flex;

      .bottom-i {
        img {
          width: 71px;
          height: 75px;
        }

      }

      .dsakjdhsajdhsakljdhsa {
        width: 147px;
        height: 21px;
        margin-top: 25px;
        background-image: url('../../../public/imgs/answer.png');
        font-size: 15px;
        line-height: 21px;
        text-align: left;
        color: #FFFFFF;
        text-shadow: -4px 3px 2px #061C43;
        padding-left: 20px;
      }

      .name-text {
        margin-top: 5px;
        padding-left: 20px;
        text-align: left;
        color: rgba(0, 255, 203, 1);
        font-size: 18px;
        font-weight: 400;
      }
    }
  }
}
</style>
